<template>
  <div>
    <van-nav-bar title="NAME" left-arrow @click-left="onClickLeft" @click-right="onClickright">
      <template #right>
        <van-icon name="shopping-cart" size="18"/>
      </template>
    </van-nav-bar>
    <van-search
      v-model="value"
      background="#242424"
      placeholder="请输入搜索关键词"
    />
    <div v-if="value">
      {{ value }}
    </div>
    <div v-else>
      <van-tabs>
        <van-tab v-for="item in tab_list" :title="item.title" :key="item.key">
          <van-tabs type="card" style="margin-top: 1vh;" @click="onClick">
            <van-tab
              v-for="item in tab"
              :title="item.name"
              :key="item.key"
            >
              <div style="margin-top: 1vh;">
                <van-grid :border="false" :column-num="2">
                  <van-grid-item v-for="index in 8" :key="index">
                    <van-image src="https://img.yzcdn.cn/vant/apple-1.jpg" @click="goods" />
                    {{ index }}
                  </van-grid-item>
                </van-grid>
              </div>
            </van-tab>
          </van-tabs>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: '',
      tab_list: [
        {
          title: '全部',
        },
        {
          title: '热门',
        },
        {
          title: '全部2',
        },
        {
          title: '全部4',
        },
        {
          title: '全部6',
        },
      ],
      tab: [
        {
          name: '综合',
        },
        {
          name: '销量',
        },
        {
          name: '新品',
        },
        {
          name: '价格',
        },
      ],
    };
  },
  methods: {
    goods() {
      this.$router.push({ path: '/m/store/goods' });
    },
    onClickLeft() {
      // 首页
      this.$router.push({ path: '/m/index' });
    },
    onClickright() {
      // 购物车
      this.$router.push({ path: '/m/mycar' });
    },
    onClick(name, title) {
      // Toast(title);
      console.log(title);
    },
  },
};
</script>
